<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">		
		<title>Sky Mega Menu</title>
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
		
		<link rel="stylesheet" href="css/demo.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/sky-mega-menu.css">
		<link rel="stylesheet" href="css/sky-mega-menu-orange.css">
		
		<!--[if lt IE 9]>
			<link rel="stylesheet" href="css/sky-mega-menu-ie8.css">
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		
		<!--[if lt IE 10]>
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
			<script src="js/jquery.placeholder.min.js"></script>
		<![endif]-->
	</head>
	<body class="bg-orange">
		<div class="body">
		
			<!-- mega menu -->
			<ul class="sky-mega-menu sky-mega-menu-anim-slide sky-mega-menu-response-to-stack">
				<!-- women -->
				<li aria-haspopup="true">
					<a href="#"><i class="fa fa-female"></i>Women</a>					
					<div class="grid-container3">
						<ul>
							<!-- dresses -->
							<li aria-haspopup="true">
								<a href="#">Dresses</a>
								<div class="grid-container4">
									<div class="grid-column grid-column2">
										<ul>
											<li><a href="#">Party</a></li>
											<li><a href="#">Casual</a></li>
											<li><a href="#">Prints</a></li>
											<li><a href="#">Solids</a></li>
											<li><a href="#">Floral</a></li>
										</ul>
									</div>
									<div class="grid-column grid-column2">
										<ul>
											<li><a href="#">Fit & Flare</a></li>
											<li><a href="#">Strapless</a></li>
											<li><a href="#">Mini</a></li>
											<li><a href="#">Longer</a></li>
											<li><a href="#">Maxi</a></li>
										</ul>
									</div>
								</div>
							</li>
							<!--/ dresses -->
							
							<!-- tops -->
							<li aria-haspopup="true">
								<a href="#">Tops</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">Blouses</a></li>
										<li><a href="#">Basics</a></li>
										<li><a href="#">Graphic Tees</a></li>
										<li><a href="#">Tunics</a></li>
										<li><a href="#">Sweaters</a></li>
									</ul>
								</div>
							</li>
							<!--/ tops -->
							
							<!-- bottoms -->
							<li aria-haspopup="true">
								<a href="#">Bottoms</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">Skirts</a></li>
										<li><a href="#">Pants</a></li>
										<li><a href="#">Leggings</a></li>
										<li><a href="#">Denim</a></li>
										<li><a href="#">Shorts</a></li>
									</ul>
								</div>
							</li>
							<!--/ bottoms -->
							
							<!-- outerwear -->
							<li aria-haspopup="true">
								<a href="#">Outerwear</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">Jackets</a></li>
										<li><a href="#">Coats</a></li>
										<li><a href="#">Blazers</a></li>
										<li><a href="#">Vests</a></li>
									</ul>
								</div>
							</li>
							<!--/ outerwear -->
							
							<!-- swimwear -->
							<li>
								<a href="#">Swimwear</a>
							</li>
							<!--/ swimwear -->
							
							<!-- shoes -->
							<li>
								<a href="#">Shoes</a>
							</li>
							<!--/ shoes -->
						</ul>
					</div>
				</li>
				<!--/ women -->
				
				<!-- men -->
				<li aria-haspopup="true">
					<a href="#"><i class="fa fa-male"></i>Men</a>
					<div class="grid-container3">
						<ul>
							<!-- sweaters -->
							<li aria-haspopup="true">
								<a href="#">Sweaters</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">Pullovers</a></li>
										<li><a href="#">Cardigans</a></li>
										<li><a href="#">Polos</a></li>
										<li><a href="#">Vests</a></li>
									</ul>
								</div>
							</li>
							<!--/ sweaters -->
							
							<!-- tops -->
							<li aria-haspopup="true">
								<a href="#">Tops</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">T-Shirts</a></li>
										<li><a href="#">Henleys</a></li>
										<li><a href="#">Dress Shirts</a></li>
										<li><a href="#">Tuxedo Shirts</a></li>
									</ul>
								</div>
							</li>
							<!--/ tops -->
							
							<!-- bottoms -->
							<li aria-haspopup="true">
								<a href="#">Bottoms</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">Pants</a></li>
										<li><a href="#">Jeans</a></li>
										<li><a href="#">Shorts</a></li>
									</ul>
								</div>
							</li>
							<!--/ bottoms -->
							
							<!-- outerwear -->
							<li aria-haspopup="true">
								<a href="#">Outerwear</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">Jackets</a></li>
										<li><a href="#">Coats</a></li>
										<li><a href="#">Denim</a></li>
										<li><a href="#">Vests</a></li>
									</ul>
								</div>
							</li>
							<!--/ outerwear -->
							
							<!-- swimwear -->
							<li>
								<a href="#">Swimwear</a>
							</li>
							<!--/ swimwear -->
							
							<!-- shoes -->
							<li>
								<a href="#">Shoes</a>
							</li>
							<!--/ shoes -->
						</ul>
					</div>
				</li>
				<!--/ men -->
				
				<!-- juniors -->
				<li aria-haspopup="true">
					<a href="#"><i class="fa fa-android"></i>Juniors</a>
					<div class="grid-container3">
						<ul>
							<!-- sweaters -->
							<li aria-haspopup="true">
								<a href="#">Sweaters</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">Pullovers</a></li>
										<li><a href="#">Cardigans</a></li>
										<li><a href="#">Polos</a></li>
										<li><a href="#">Vests</a></li>
									</ul>
								</div>
							</li>
							<!--/ sweaters -->
							
							<!-- tops -->
							<li aria-haspopup="true">
								<a href="#">Tops</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">T-Shirts</a></li>
										<li><a href="#">Henleys</a></li>
										<li><a href="#">Dress Shirts</a></li>
										<li><a href="#">Tuxedo Shirts</a></li>
									</ul>
								</div>
							</li>
							<!--/ tops -->
							
							<!-- bottoms -->
							<li aria-haspopup="true">
								<a href="#">Bottoms</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">Pants</a></li>
										<li><a href="#">Jeans</a></li>
										<li><a href="#">Shorts</a></li>
									</ul>
								</div>
							</li>
							<!--/ bottoms -->
							
							<!-- outerwear -->
							<li aria-haspopup="true">
								<a href="#">Outerwear</a>
								<div class="grid-container2">
									<ul>
										<li><a href="#">Jackets</a></li>
										<li><a href="#">Coats</a></li>
										<li><a href="#">Denim</a></li>
										<li><a href="#">Vests</a></li>
									</ul>
								</div>
							</li>
							<!--/ outerwear -->	
						</ul>
					</div>	
				</li>
				<!--/ juniors -->
				
				<!-- accessories -->
				<li aria-haspopup="true">
					<a href="#"><i class="fa fa-gears"></i>Accessories</a>
					<div class="grid-container3">
						<ul>
							<li><a href="#">Hats & Caps</a></li>
							<li><a href="#">Wallets</a></li>
							<li><a href="#">Money Clips</a></li>
							<li><a href="#">Belts</a></li>
							<li><a href="#">Sunglasses</a></li>
							<li><a href="#">Cold Weather</a></li>
						</ul>
					</div>
				</li>
				<!--/ accessories -->
				
				<!-- search -->
				<li class="right search">					
					<form action="#">					
						<div class="input">
							<button type="submit" class="button">Go</button>
							<input type="text" placeholder="Search">
						</div>					
					</form>
				</li>
				<!--/ search -->
			</ul>
			<!--/ mega menu -->
			
		</div>
	</body>
</html>